/**
 * @class button - horizontal rule (open dialog window)
 *
 * @param  elRTE  rte   объект-редактор
 * @param  String name  название кнопки
 *
 * @author:    Dmitry Levashov (dio) dio@std42.ru
 * @copyright: Studio 42, http://www.std42.ru
 **/
(function ($) {
    elRTE.prototype.ui.prototype.buttons.horizontalrule = function (rte, name) {
        this.constructor.prototype.constructor.call(this, rte, name);
        var self = this;
        this.src = {
            width:$('<input type="text" />').attr({'name':'width', 'size':4}).css('text-align', 'right'),
            wunit:$('<select />').attr('name', 'wunit')
                .append($('<option />').val('%').text('%'))
                .append($('<option />').val('px').text('px'))
                .val('%'),
            height:$('<input type="text" />').attr({'name':'height', 'size':4}).css('text-align', 'right'),
            bg:$('<div />'),
            border:$('<div />'),
            'class':$('<input type="text" />').css('width', '100%'),
            style:$('<input type="text" />').css('width', '100%')
        }

        this.command = function () {
            this.src.bg.elColorPicker({palettePosition:'outer', 'class':'el-colorpicker ui-icon ui-icon-pencil'});

            var n = this.rte.selection.getEnd();
            this.hr = n.nodeName == 'HR' ? $(n) : $(rte.doc.createElement('hr')).css({width:'100%', height:'1px'});
            this.src.border.elBorderSelect({styleHeight:73, value:this.hr});

            var _w = this.hr.css('width') || this.hr.attr('width');
            this.src.width.val(parseInt(_w) || 100);
            this.src.wunit.val(_w.indexOf('px') != -1 ? 'px' : '%');

            this.src.height.val(this.rte.utils.toPixels(this.hr.css('height') || this.hr.attr('height')) || 1);

            this.src.bg.val(this.rte.utils.color2Hex(this.hr.css('background-color')));
            this.src['class'].val(this.rte.dom.attr(this.hr, 'class'));
            this.src.style.val(this.rte.dom.attr(this.hr, 'style'));

            var opts = {
                rtl:this.rte.rtl,
                submit:function (e, d) {
                    e.stopPropagation();
                    e.preventDefault();
                    self.set();
                    d.close();
                },
                dialog:{
                    title:this.rte.i18n('Horizontal rule')
                }
            }

            var d = new elDialogForm(opts);
            d.append([this.rte.i18n('Width'), $('<span />').append(this.src.width).append(this.src.wunit) ], null, true)
                .append([this.rte.i18n('Height'), $('<span />').append(this.src.height).append(' px')], null, true)
                .append([this.rte.i18n('Border'), this.src.border], null, true)
                .append([this.rte.i18n('Background'), this.src.bg], null, true)
                .append([this.rte.i18n('Css class'), this.src['class']], null, true)
                .append([this.rte.i18n('Css style'), this.src.style], null, true)
                .open();
        }

        this.update = function () {
            this.domElem.removeClass('disabled');
            if (this.rte.selection.getEnd().nodeName == 'HR') {
                this.domElem.addClass('active');
            } else {
                this.domElem.removeClass('active');
            }
        }

        this.set = function () {
            this.rte.history.add();
            !this.hr.parentNode && this.rte.selection.insertNode(this.hr.get(0));
            var attr = {
                noshade:true,
                style:this.src.style.val()
            }
            var b = this.src.border.val();
            var css = {
                width:(parseInt(this.src.width.val()) || 100) + this.src.wunit.val(),
                height:parseInt(this.src.height.val()) || 1,
                'background-color':this.src.bg.val(),
                border:b.width && b.style ? b.width + ' ' + b.style + ' ' + b.color : ''
            }

            this.hr.removeAttr('class')
                .removeAttr('style')
                .removeAttr('width')
                .removeAttr('height')
                .removeAttr('align')
                .attr(attr)
                .css(css);

            if (this.src['class'].val()) {
                this.hr.attr('class', this.src['class'].val());
            }
            this.rte.ui.update()
        }

    }
})(jQuery);
